<template>
    <view class="content">
        <view class="cart_content self-pickup city_delivery_content" v-if="Number(shippingType) == 2  && type=='orderDetails'">
            <view class="city_delivery_content_left" style="width: 85%;" v-if="status == 'unpaid' || Number(orderStatus) == 4">
                <view class="left_top"> 立即配送，约10:32送达 </view>
                <view class="left_bottom">商家等待您的下单</view>
            </view>
            <view class="city_delivery_content_left" style="width: 85%;"
                v-if="status == 'unshipped' || Number(orderStatus) == 0">
                <view class="left_top"> 等待同城揽件，预计10:32送达</view>
                <view class="left_bottom">您的订单已出库</view>
            </view>
            <view class="city_delivery_content_left" style="width: 85%;"
                v-if="status == 'unreceived' || Number(orderStatus) == 1">
                <view class="left_top"> 同城配送中，约10:32送达 </view>
                <view class="left_bottom">您的订单同城配送中</view>
            </view>
            <view class="city_delivery_content_left" style="width: 85%;"
                v-if="status == 'unreviewed' || Number(orderStatus) == 2">
                <view class="left_top"> 订单已签收，10:32送达 </view>
                <view class="left_bottom">您的订单已签收，请核查</view>
            </view>
            <view class="city-delivery" style="width: 15%;">
                <view class="city_delivery_pic">
                    <img v-if="Number(orderStatus) == 4"
                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/submitOrder.png"
                        alt="" mode="widthFix">
                    <img v-if="Number(orderStatus) == 0"
                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/daifahuo.png" alt=""
                        mode="widthFix">
                    <img v-if="Number(orderStatus) == 1 || Number(orderStatus) == 10"
                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/daishouhuo.png"
                        alt="" mode="widthFix">
                    <img v-if="status == 'unreviewed' || Number(orderStatus) == 2"
                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/qianshou.png" alt=""
                        mode="widthFix">
                </view>
            </view>
        </view>
        <view class="cart_content self-pickup city_delivery_content" v-if="type=='settlement'">
            <view class="city_delivery_content_left" style="width: 85%;">
                <view class="left_top"> 立即配送，约10:32送达 </view>
                <view class="left_bottom">商家等待您的下单</view>
            </view>
            <view class="city-delivery" style="width: 15%;">
              <view class="city_delivery_pic" > <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/submitOrder.png" alt="" mode="widthFix"> </view>
            </view>
        </view>
    </view>
</template>

<script>

export default {
    props: {
        shippingType: {
            type: String,
            default: '',
        },
        orderStatus: {
            type: [String, Number],
            default: '',
        },
        type: {
            type: String,
            default: '',
        }
    },
    data () {
        return {

        }
    },

    computed: {
    },


    watch: {

    },
    onLoad () {

    },
    onReady () {

    },

    methods: {
      

    },

}
</script>
<style lang="scss" scoped>
// 自提点
.self-pickup {
    margin-top: 10px;
    padding: 24px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 有自提点的内容
  .self-pickup-left {
    width: 75%;
    display: flex;

    .self_pickup_pic {
      width: 20%;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;

      img {
        width: 100%;
        height: auto;
      }
    }

    // 图片右边的文字
    .self_pickup_left_l {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 70%;
      margin-left: 15px;

      .left_top {
        font-size: 22rpx;
        text-align: left;

        .self_pickup_name {
          color: #737373;
          margin-right: 7px;
        }

        .distance {
          color: #FF6203;
        }
      }

      .left_bottom {
        font-size: 22rpx;
        text-align: left;
        color: #737373;
      }
    }

  }

  .self-pickup-right {
    display: flex;

    .spr_text {
      margin-left: 8px;
      font-size: 22rpx;
      text-align: left;
      color: #888888;
    }
  }

  // 同城配送
  .city_delivery_content {
    display: flex;
    align-items: center;

    .city_delivery_content_left {
      width: 85%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .left_top {
        font-size: 28rpx;
        text-align: left;
      }

      .left_bottom {
        font-size: 22rpx;
        text-align: left;
        color: #737373;
      }
    }

    .city-delivery {
      width: 15%;

      .city_delivery_pic {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  // 无自提点
  .no-self-pickup {
    font-weight: bolder;
    font-size: 28rpx;
    text-align: left;
    color: #FF6203;
  }
</style>

